<script>
export default {
  name: "TableExamplePage",
  data(){
      return{
        tableData:[
          {
            name:'张飞',
            age : 32,
            sex :'male',
            data:'2024-8-24',
            address:'江苏省南京市',

          },
          {
            name:'张飞',
            age : 32,
            sex :'male',
            data:'2024-8-24',
            address:'江苏省南京市',

          },
          {
            name:'张飞',
            age : 32,
            sex :'male',
            data:'2024-8-24',
            address:'江苏省南京市',

          },
        ]
      }
  }
}
</script>

<template>
<div>
  <el-table :data="tableData" stripe border>

    <el-table-column label="姓名" prop="name" width="200">
      <template v-slot="scope">
        <el-tag>
          {{scope.row.name}}
        </el-tag>
      </template>

    </el-table-column>
    <el-table-column label="年龄" prop="age" width="200">    </el-table-column>
    <el-table-column label="性别" prop="sex" width="200">    </el-table-column>
    <el-table-column label="日期" prop="data" width="200">    </el-table-column>
    <el-table-column label="地址" prop="address" width="200"></el-table-column>
    <el-table-column label="操作" >
      <el-button type="primary" size="mini" plain icon="el-icon-edit">编辑</el-button>
      <el-button type="danger" size="mini" plain icon="el-icon-delete"> 删除</el-button>
    </el-table-column>

  </el-table>
</div>
</template>

<style scoped>

</style>